<template>
    <div class="tree">
        <tree-item
            v-for="child in innerOptions"
            :key="child.key"
            :item="child"
            :checkbox="checkbox"
        />
    </div>
</template>

<script>
import TreeItem from './item';
export default {
    name: 'Tree',
    components: {
        TreeItem
    },
    props: {
        options: {
            type: Array,
            default: () => []
        },
        checkbox: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            innerOptions: []
        }
    },
    created() {
        const handleOptions = (item, indent = 0) => {
            return {
                ...item,
                indent: indent,
                expand: true,
                checked: false,
                disabled: false,
                children: (item.children || []).map(item => handleOptions(item, indent + 1))
            }
        }
        this.innerOptions = this.options.map(item => handleOptions(item));
    },
    methods: {
    }
};
</script>

<style lang="less" scoped>
.tree {
    text-align: left;
}
</style>